/*
 * 活动列表
 * @Author: zfx
 * @Date: 2018-07-24 9:00:05
 */
<style lang="less" rel="stylesheet/less" type="text/less" >
.v-customer-activity-index{
	.ivu-table-column-center{
		padding: 5px 0;
	}
	.ivu-table-cell{
		padding-left: 10px;
		padding-right: 10px;
	}
	.info-activity{
        display: flex;
        justify-content: center;
		white-space: nowrap;
		padding: 5px 0;
	}
	.info-thumb{
		width: 100px;
		height: 100px;
		cursor: pointer;
		display: flex;
        align-items: center;
        justify-content: center;
		img{
			width: 100%;
		}
	}
	.info-title{
		height: 60px;
		display:  table-cell;
		white-space: normal;
		vertical-align: middle;
		padding-left: 8px;
	}
	.prices-item {
		white-space: nowrap;
		text-align: center;
	}
	.deleted, .hot, .new, .sale {
		cursor: pointer;
	}
}
</style>
<template>
	<div class="v-customer-activity-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="activityList"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>
		<Modal
			v-model="visible"
			:title="$t('activity.photo')">
			<img
				v-if="visible"
				:src="image"
				style="width: 100%">
		</Modal>
	</div>
</template>

<script>
import { Button } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'ActivityIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		activityList: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {

			visible: false,

			image: '',

			columns: [
				{
					title: this.$t('activity.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('activity.url'),
					key: 'activity_url',
					align: 'center',
					render: (h, { row }) => <div> { row.activity_url || '-' } </div>,
				},
				{
					title: this.$t('activity.photo'),
					key: 'activity_picture',
					align: 'center',
					render: (h, { row }) => {
						const thumb_image = row.activity_picture ? <img src={ row.activity_picture } on-click={() => { this.activityModal(row.activity_picture); }} alt="无" /> : '无';
						return (
							<div class="info-activity">
								<div class="info-thumb">{ thumb_image }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('activity.start_time'),
					key: 'started_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ '-' }</div>;
						if (row.started_at) {
							const [day, time] = row.started_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
				{
					title: this.$t('activity.end_time'),
					key: 'ended_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ '-' }</div>;
						if (row.ended_at) {
							const [day, time] = row.ended_at.split(' ');
							date = (
								<div>
									<div>{ day }</div>
									<div>{ time }</div>
								</div>
							);
						}
						return date;
					},
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 140,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		/**
		 * 活动模态框
		 * @param {String} url {活动路径}
		 * @return {undefined}
		 */
		activityModal(url) {
			this.image = url;
			this.visible = true;
		},

	},
};
</script>
